<template>
    <div class="section-container">
        <span class="title">Turn Compliance Standards Into a Competitive Advantage</span>
        <div class="customer-section">
            <img class="img" src="@/assets/imgs/customer1.jpg" />
            <img class="img" src="@/assets/imgs/customer2.jpg" />
            <img class="img" src="@/assets/imgs/customer3.jpg" />
            <img class="img" src="@/assets/imgs/customer4.jpg" />
        </div>
        <div class="customer-section">
            <img class="img-small" src="@/assets/imgs/customer5.jpg" />
            <img class="img-small" src="@/assets/imgs/customer6.png" />
            <img class="img-small" src="@/assets/imgs/customer7.jpg" />
            <img class="img-small" src="@/assets/imgs/customer8.jpg" />
            <img class="img-small" src="@/assets/imgs/customer9.jpg" />
        </div>
        <!-- <span class="btn">Learn More</span> -->
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.section-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 0;
    background-color: #f8f8f8;

    .title {
        font-size: 40px;
        font-weight: 600;
        font-family: 'MouldyCheeseRegular';
    }

    .img {
        width: 850px;
        height: 290px;
        margin-top: 50px;
    }

    .customer-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 60%;
        margin-top: 20px;
    }

    .img {
        width: 173px;
        height: 173px;
    }

    .img-small {
        width: 120px;
        height: 120px;
    }

    .btn {
        margin-top: 20px;
        width: 136px;
        height: 46px;
        background-color: #e7f70f;
        line-height: 46px;
        color: #000;
        text-align: center;
        border-radius: 5px;
        margin-top: 40px;
    }

}
</style>